<template>
  <div>
    <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
      <px-form-item label="培训类型" prop="type">
        <px-select v-model="queryParams.type" placeholder="请选择类型" clearable>
          <px-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="培训名称" prop="name">
        <px-input v-model="queryParams.name" placeholder="请输入培训名称" clearable />
      </px-form-item>
      <px-form-item label="科室" prop="className">
        <px-select v-model="queryParams.className" placeholder="请选择科室" clearable>
          <px-option v-for="item in classNameList" :key="item.id" :label="item.name" :value="item.value" />
        </px-select>
      </px-form-item>
      <div class="search-form-btn">
        <px-button type="primary" @click="handleQuery">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
        <px-button v-if="exportUrl" v-has="`${exportAuth}`" type="primary" plain @click="handleExport">导出</px-button>
      </div>
    </px-form>
  </div>
</template>

<script setup>
import { queryCurrentClassList, queryDictData } from "@/api/common";
import { defineEmits, onMounted, reactive, ref, toRefs, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  exportUrl: {
    type: String,
    required: false,
    defalut: ""
  },
  exportAuth: {
    type: String,
    required: false,
    defalut: ""
  },
  exportLabel: {
    type: String,
    required: false,
    defalut: ""
  },
  getExportParams: {
    type: Function,
    required: false,
    defalut: null
  }
});

const emit = defineEmits(["search"]);

const formRef = ref(null);
const state = reactive({
  typeList: [],
  classNameList: [],
  queryParams: {
    type: "",
    name: "",
    className: ""
  }
});
const { typeList, classNameList, queryParams } = toRefs(state);

onMounted(() => {
  getTrainTypeSelect();
  getClassNameSelect();
});

// 获取培训类型下拉框数据
const getTrainTypeSelect = async () => {
  const typeList = await queryDictData({ typeCode: "TRAIN_TYPE" });
  state.typeList = [...typeList];
};

// 获取科室下拉框数据
const getClassNameSelect = async () => {
  const classNameData = await queryCurrentClassList();
  state.classNameList = [...classNameData];
};

const handleQuery = () => {
  emit("search", state.queryParams);
};

const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

// 导出
const handleExport = () => {
  proxy.download("post", props.exportUrl, props.getExportParams(), props.exportLabel);
};
</script>
<style lang="scss" scoped>
.search-form {
  display: flex;
  align-items: center;

  .search-form-btn {
    margin-bottom: 16px;
  }
}
</style>
